import React, { Component } from 'react';
import { NavLink, withRouter } from "react-router-dom"
import "./Header.scss";
import { Row, Col, Input, Drawer } from 'antd';

import {
    HomeOutlined,
    ShoppingCartOutlined,
    SearchOutlined
} from '@ant-design/icons';
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            searchText:""

        }
    }
    onOpen = () => {
        this.setState({ visible: true })
    }
    onClose = () => {
        this.setState({ visible: false })

    }
    handleKeyup=(ev)=>{
        // console.log(ev.keyCode)
        if(ev.keyCode===13){
            this.props.history.push('/seachList?keyword='+this.state.searchText)
        }

    }
    handlechange=(ev)=>{
        // console.log(ev.target.value)
    this.setState({searchText:ev.target.value})
    }
    goCart=()=>{
        this.props.history.push("/cart")
    }
    goHome=()=>{
        this.props.history.push("/mian")

    }
    render() {
        const { pathname} = this.props.location
        // console.log(pathname)
        const {searchText,visible }=this.state

        return (
            <div className="headers">
                {pathname === "/main" || pathname === "/mask" ? <div className="header">
                    <Row>
                        <Col span={4}> <HomeOutlined className="home" onClick={this.goHome}/></Col>
                        <Col span={16}><Input onClick={this.onOpen} placeholder="保湿面膜0.1元" prefix={<SearchOutlined />} /></Col>
                        <Col span={4}><ShoppingCartOutlined className="cart"  onClick={this.goCart}/></Col>
                    </Row>
                    <div className="headernav">
                        <NavLink to="/main">今日推荐</NavLink>
                        <NavLink to="/mask">面膜中心</NavLink>
                    </div>
                    <Drawer
                        placement="right"
                        closable={false}
                        onClose={this.onClose}
                        visible={visible}
                        width="100%"
                    >
                        <div className="list_top">
                            <Row>
                            <Col span={20}><Input value={searchText}  onKeyUp={this.handleKeyup} onChange={this.handlechange} style={{borderRadius:"15px"}} onClick={this.onOpen} placeholder="保湿面膜0.1元" prefix={<SearchOutlined/>} /></Col>
                            <Col span={4} style={{textAlign:"center",lineHeight:"30px"}}><span onClick={this.onClose}>取消</span></Col>
                           </Row>
                        </div>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                        <p>Some contents...</p>
                    </Drawer>


                </div> : null}

            </div>
        );
    }
}

export default withRouter(Header);